<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻动态</title>
    <link rel="stylesheet" href="/css/new.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/layui-v2.6.4/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/layui/jquery.min.js"></script>
    <script src="/layui/axios.min.js"></script>
</head>
<body>
    <!-- 头部 -->
    <div th:replace="common/common::head1"></div>
    <!-- 导航 -->
    <div th:replace="common/common::head2"></div>
    <!--横幅-->
    <div th:replace="common/common::head3"></div>
    <!-- 主体部分 -->
    <section class="main_body">
        <div class="container">
            <div class="ss">
                <div th:replace="common/common::head4"></div>

            </div>
        </div>
        <article>
                <main class="container">
                    <div >
                        <p class="ding" >新闻动态</p>
                        <p><a href="/front/index">首页 </a><a href="#">>>新闻动态</a></p>
                    </div>
                </main>
        </article>
        <!-- 侧边栏 -->
        <aside  class="container ">
            <nav>
                <ul>
                    <li class="list">新闻动态 </li>
                </ul>
            </nav>
            <div>
                <ul class="list_1" id="news">

                </ul>
                <div id="demo20"></div>
            </div>

        </aside>
    </section>
      <!-- 尾部 -->
    <div th:replace="common/common::footer"></div>
</body>
<script>
    layui.use(['form','laypage'],function () {
        var form = layui.form, laypage = layui.laypage;

        var newsData = [];

        axios.get('/front/news/getAll').then(res => {
            newsData = res.data.data;
        })

        setTimeout(function () {
            //调用分页
            laypage.render({
                elem: 'demo20'
                ,count: newsData.length
                ,limit: 6
                ,jump: function(obj){
                    //模拟渲染
                    document.getElementById('news').innerHTML = function(){
                        var arr = []
                            ,thisData = newsData.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
                        layui.each(thisData, function(index, item){
                            arr.push('<li><span>'+item.newsCreateTime+'</span><a href="'+'/front/newsDetail/'+item.id+'">'+item.newsTitle+'</a></li>');
                        });
                        return arr.join('');
                    }();
                }
            });
        },100)

    })
</script>
</html>
